<template>
  <div class="menu-main">
    <sidebarView class="sider" />
    <div class="main"><headerView /><contentView class="content" /></div>
  </div>
</template>

<script setup>
import sidebarView from './sidebarView.vue'
import headerView from './headerView.vue'
import contentView from './contentView.vue'
</script>
<style lang="scss" scoped>
.menu-main {
  width: 100%;
  height: 100%;
  display: flex;
  background: #ecf0f1;
  .sider {
    overflow: auto;
    margin-right: 16px;
  }
  .main {
    width: 100%;
    padding-bottom: 16px;
    .content {
      width: calc(100% - 16px);
      height: calc(100% - 60px - 16px);
      background: #fff;
      margin: 16px 0;
      overflow: auto;
    }
  }
}
</style>
